<template>
  <el-dialog
    v-model="visible"
    title="关于 PowerBI Web版"
    width="500px"
    :before-close="handleClose">
    
    <div class="about-content">
      <div class="app-info">
        <div class="app-icon">
          <el-icon size="64" color="#409EFF"><TrendCharts /></el-icon>
        </div>
        <h2>{{ APP_CONFIG.name }}</h2>
        <p class="version">版本 {{ APP_CONFIG.version }}</p>
        <p class="description">{{ APP_CONFIG.description }}</p>
      </div>
      
      <el-divider />
      
      <div class="features">
        <h3>核心功能</h3>
        <ul class="feature-list">
          <li>
            <el-icon><Operation /></el-icon>
            智能数据清洗和预处理
          </li>
          <li>
            <el-icon><Connection /></el-icon>
            专业数据建模和关系管理
          </li>
          <li>
            <el-icon><Grid /></el-icon>
            拖拽式报表设计器
          </li>
          <li>
            <el-icon><TrendCharts /></el-icon>
            多种图表类型支持
          </li>
          <li>
            <el-icon><Share /></el-icon>
            报表导出和分享
          </li>
        </ul>
      </div>
      
      <el-divider />
      
      <div class="tech-stack">
        <h3>技术栈</h3>
        <div class="tech-tags">
          <el-tag>Vue 3</el-tag>
          <el-tag type="success">Element Plus</el-tag>
          <el-tag type="warning">Pinia</el-tag>
          <el-tag type="danger">Vue Router</el-tag>
          <el-tag type="info">Vite</el-tag>
        </div>
      </div>
      
      <el-divider />
      
      <div class="links">
        <h3>相关链接</h3>
        <div class="link-buttons">
          <el-button link @click="openLink('https://github.com')">
            <el-icon><Link /></el-icon>
            GitHub
          </el-button>
          <el-button link @click="openLink('https://docs.example.com')">
            <el-icon><Document /></el-icon>
            文档
          </el-button>
          <el-button link @click="openLink('mailto:support@example.com')">
            <el-icon><Message /></el-icon>
            反馈
          </el-button>
        </div>
      </div>
      
      <div class="copyright">
        <p>&copy; 2024 PowerBI Web版. All rights reserved.</p>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { APP_CONFIG } from '../../constants'
import { 
  TrendCharts, 
  Operation, 
  Connection, 
  Grid, 
  Share, 
  Link, 
  Document, 
  Message 
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

// 响应式数据
const visible = ref(false)

// 监听器
watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const openLink = (url) => {
  window.open(url, '_blank')
}
</script>

<style scoped>
.about-content {
  text-align: center;
}

.app-info {
  margin-bottom: 24px;
}

.app-icon {
  margin-bottom: 16px;
}

.app-info h2 {
  margin: 0 0 8px 0;
  color: var(--el-text-color-primary);
  font-size: 24px;
  font-weight: 600;
}

.version {
  margin: 0 0 12px 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.description {
  margin: 0;
  color: var(--el-text-color-regular);
  font-size: 16px;
  line-height: 1.5;
}

.features h3,
.tech-stack h3,
.links h3 {
  margin: 0 0 16px 0;
  color: var(--el-text-color-primary);
  font-size: 18px;
  font-weight: 600;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--el-text-color-regular);
}

.tech-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.link-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.copyright {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.copyright p {
  margin: 0;
  color: var(--el-text-color-placeholder);
  font-size: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>



